<!DOCTYPE html>
<html>

<head>
  <title>
    <%= title %>
  </title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

<body>
  <h1>mongodb的增删改查的演示</h1>
  <div>
    <div>用户名:<input id="username" /></div>
    <div>密码:<input type="password" id="password" /></div>
    <div>年龄:<input type="number" id="age" /></div>
    <div><button id="register">注册</button></div>
  </div>

  <hr>
  <div>
    <button id="update">更新</button>
    <button id="delete">删除</button>
  </div>

  <hr>

  <table>
    <thead>
      <tr>
        <td>id</td>
        <td>username</td>
        <td>age</td>
      </tr>
    <tbody>

    </tbody>
    </thead>

  </table>

  <script>
    var register = document.querySelector("#register")
    var username = document.querySelector("#username")
    var password = document.querySelector("#password")
    var age = document.querySelector("#age")
    var update = document.querySelector('#update')
    var deletebutton = document.querySelector('#delete')

    // 删除数据库user数据
    deletebutton.onclick = () => {
      fetch('/api/user/delete/66e5955ded9ac6cac9d71a50', {
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => res.json()).then(res => {
        console.log(res);
      })

    }

    update.onclick = () => {
      fetch('/api/user/update/66e5955ded9ac6cac9d71a50', {
        method: 'POST',
        body: JSON.stringify({
          username: '修改后的名字',
          password: '修改后的密码',
          age: 1
        }),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => res.json()).then(res => {
        console.log(res);
      })

    }


    register.onclick = () => {
      console.log(username.value, password.value, age.value)
      fetch('/api/user/add', {
        method: 'POST',
        body: JSON.stringify({
          username: username.value,
          password: password.value,
          age: age.value
        }),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => res.json()).then(res => {
        console.log(res);
      })

    }

    // 获取列表
    fetch("/api/user/list?page=1&limit=10").then(res => res.json()).then(res => {
      console.log(res)

      var tbody = document.querySelector('tbody')
      tbody.innerHTML = res.map(item => {
        return `
          <tr>
            <td>${item._id}</td>  
            <td>${item.username}</td>  
            <td>${item.age}</td>  
          </tr>
        `
      }).join('')
    })

  </script>
</body>

</html>